<template>
  <div>
    <div>Home</div>
    <!-- 编程式导航 -->
    <button @click="goAbout">去about页面</button>
    <button @click="router.back()">返回首页</button>
    <br />
    <NuxtLink to="/home/message?name=liming">message</NuxtLink>
    <NuxtLink to="/home/111">详情</NuxtLink>

    <!-- assets的使用 -->
    <img src="/images/2.jpg" alt="cart" class="img" />
    <img src="~/assets/images/4.png" alt="猩猩" class="img" />
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>

<script lang="ts" setup>
// 中间件
definePageMeta({
  middleware: "test",
});
const router = useRouter();
const goAbout = () => {
  router.push("/about");
};
// 标题
useHead({
  title: "首页",
});
// 过渡

</script>

<style scoped>
.img {
  margin-top: 20px;
  display: block;
  width: 50px;
  border-radius: 50%;
}
</style>
